/*
  学习目标：hooks补充-✅useHistory
  作用: 获取history对象

  hooks补充-useLocation  useParams


  useHistory👍等价于props.history
  区别: useHistory的使用范围更广
  1. props.history只能用于Route设置过匹配规则的组件
  2. useHistory可以在任意的函数组件中使用
  
  useLocation✅使用范围更广
  等价于: props.location

  useParams✅等价于props.match.params
  作用: 获取动态路由参数

*/
import { BrowserRouter as Router, Route, Switch, useHistory, useParams } from 'react-router-dom';
export default function App() {
  return (
    <Router>
      <Header></Header>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/my/:xxx" component={MyMusic} />
      </Switch>
    </Router>
  );
}

function Header() {
  const history = useHistory();
  return (
    <>
      <h1>我是header组件</h1>
      <button onClick={() => history.push('/my')}>点我跳转</button>
    </>
  );
}

function Home({ history }) {
  return (
    <>
      <h1>我是首页组件</h1>
      <button onClick={() => history.push('/my')}>点我跳转</button>
    </>
  );
}

function MyMusic() {
  const res = useParams();
  console.log('res  ----->  ', res);
  return <h1>我是我的音乐件</h1>;
}
